﻿﻿﻿﻿<template>
	<view class="certification-container">
		<view class="page-title">
			<text>教师认证</text>
		</view>
		
		<!-- 基本信息部分 -->
		<view class="section">
			<view class="section-title">基本信息</view>
			
			<view class="form-item">
				<text class="label">真实姓名</text>
				<input type="text" v-model="formData.realName" placeholder="请输入真实姓名" class="input" />
				<text v-if="formData.realName" class="tip-valid">✓ 已填写</text>
				<text v-else class="tip-invalid">* 请填写真实姓名</text>
			</view>
			
			<view class="form-item">
				<text class="label">身份证号</text>
				<input type="text" v-model="formData.idNumber" placeholder="请输入身份证号" class="input" maxlength="18" />
				<text v-if="formData.idNumber" class="tip-valid">✓ 已填写</text>
				<text v-else class="tip-invalid">* 请填写身份证号</text>
			</view>

			<!-- 实名认证部分 -->
			<view class="form-item">
				<text class="label">实名认证</text>
				<view class="realname-auth-container">
					<button
						class="realname-auth-btn"
						:class="getRealNameAuthBtnClass()"
						:disabled="!canStartRealNameAuth() || realNameAuthStatus === 'processing'"
						:loading="realNameAuthStatus === 'processing'"
						@tap="handleRealNameAuth">
						{{ getRealNameAuthBtnText() }}
					</button>
					<text class="realname-auth-status" :class="getRealNameAuthStatusClass()">
						{{ getRealNameAuthStatusText() }}
					</text>
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">手机号码</text>
				<input type="number" v-model="formData.phone" placeholder="请输入手机号码" class="input" maxlength="11" />
				<text v-if="formData.phone" class="tip-valid">✓ 已填写</text>
				<text v-else class="tip-invalid">* 请填写手机号码</text>
			</view>
			
			<view class="form-item">
				<text class="label">电子邮箱</text>
				<input type="text" v-model="formData.email" placeholder="请输入电子邮箱" class="input" />
				<text class="tip-optional">选填项</text>
			</view>
		</view>
		
		<!-- 专业资质部分 -->
		<view class="section">
			<view class="section-title">专业资质</view>
			
			<view class="form-item">
				<text class="label">最高学历</text>
				<picker @change="handleEducationChange" :value="educationIndex" :range="educationLevels">
					<view class="picker-item">
						<text>{{ formData.education || '请选择学历' }}</text>
						<text class="arrow">></text>
					</view>
				</picker>
				<text v-if="formData.education" class="tip-valid">✓ 已选择</text>
				<text v-else class="tip-invalid">* 请选择学历</text>
			</view>
			
			<view class="form-item">
				<text class="label">毕业院校</text>
				<input type="text" v-model="formData.graduateSchool" placeholder="请输入毕业院校" class="input" />
				<text v-if="formData.graduateSchool" class="tip-valid">✓ 已填写</text>
				<text v-else class="tip-invalid">* 请填写毕业院校</text>
			</view>
			
			<view class="form-item">
				<text class="label">专业名称</text>
				<input type="text" v-model="formData.major" placeholder="请输入专业名称" class="input" />
				<text v-if="formData.major" class="tip-valid">✓ 已填写</text>
				<text v-else class="tip-invalid">* 请填写专业名称</text>
			</view>
			
			<view class="form-item">
				<text class="label">教龄</text>
				<picker @change="handleTeachingYearsChange" :value="teachingYearsIndex" :range="teachingYearsOptions">
					<view class="picker-item">
						<text>{{ formData.teachingYearsText || '请选择教龄' }}</text>
						<text class="arrow">></text>
					</view>
				</picker>
				<text v-if="formData.teachingYears" class="tip-valid">✓ 已选择</text>
				<text v-else class="tip-invalid">* 请选择教龄</text>
			</view>
		</view>
		
		<!-- 证件上传部分 -->
		<view class="section">
			<view class="section-title">证件上传</view>
			
			<view class="upload-item">
				<text class="upload-label">身份证正面</text>
				<view class="upload-container" @tap="chooseImage('idCardFront')">
					<image v-if="formData.idCardFront" :src="formData.idCardFront" mode="aspectFit" class="preview-image"></image>
					<view v-else class="upload-placeholder">
						<text class="upload-icon">+</text>
						<text class="upload-text">点击上传</text>
					</view>
				</view>
				<text v-if="formData.idCardFront" class="tip-valid">✓ 已上传</text>
				<text v-else class="tip-invalid">* 请上传身份证正面照片</text>
			</view>
			
			<view class="upload-item">
				<text class="upload-label">身份证反面</text>
				<view class="upload-container" @tap="chooseImage('idCardBack')">
					<image v-if="formData.idCardBack" :src="formData.idCardBack" mode="aspectFit" class="preview-image"></image>
					<view v-else class="upload-placeholder">
						<text class="upload-icon">+</text>
						<text class="upload-text">点击上传</text>
					</view>
				</view>
				<text v-if="formData.idCardBack" class="tip-valid">✓ 已上传</text>
				<text v-else class="tip-invalid">* 请上传身份证反面照片</text>
			</view>
			
			<view class="upload-item">
				<text class="upload-label">学历证书</text>
				<view class="upload-container" @tap="chooseImage('diplomaImg')">
					<image v-if="formData.diplomaImg" :src="formData.diplomaImg" mode="aspectFit" class="preview-image"></image>
					<view v-else class="upload-placeholder">
						<text class="upload-icon">+</text>
						<text class="upload-text">点击上传</text>
					</view>
				</view>
				<text v-if="formData.diplomaImg" class="tip-valid">✓ 已上传</text>
				<text v-else class="tip-invalid">* 请上传学历证书照片</text>
			</view>
			
			<view class="upload-item">
				<text class="upload-label">教师资格证</text>
				<view class="upload-container" @tap="chooseImage('teacherCertImg')">
					<image v-if="formData.teacherCertImg" :src="formData.teacherCertImg" mode="aspectFit" class="preview-image"></image>
					<view v-else class="upload-placeholder">
						<text class="upload-icon">+</text>
						<text class="upload-text">点击上传</text>
					</view>
				</view>
				<text class="tip-optional">选填项</text>
			</view>
		</view>
		
		<!-- 教学简介 -->
		<view class="section">
			<view class="section-title">教学简介</view>
			<textarea v-model="formData.introduction" class="intro-textarea" placeholder="请简要介绍您的教学经验、风格和特长，不少于5字..." :maxlength="500"></textarea>
			<div class="text-count">{{ formData.introduction.length }}/500</div>
		</view>
		
		<!-- 协议同意 -->
		<view class="agreement-section">
			<view class="agreement-item" @tap="toggleAgreement">
					<checkbox :checked="isAgreed" color="#ff6b6b" />
					<text class="agreement-text">我已阅读并同意《教师服务协议》和《隐私政策》</text>
				</view>
			<text v-if="isAgreed" class="tip-valid">✓ 已同意</text>
			<text v-else class="tip-invalid">* 请阅读并同意协议</text>
		</view>
		
		<!-- 提交按钮 -->
		<button
			class="submit-btn"
			:disabled="isSubmitting || !canSubmitCertification()"
			:loading="isSubmitting"
			@tap="submitCertification">提交认证</button>
	</view>
</template>

<script>
import { teacherApi } from '@/api/teacher.js'
import { userApi } from '@/api/user.js'

export default {
	data() {
		return {
			formData: {
				realName: '',
				idNumber: '',
				phone: '',
				email: '',
				education: '',
				graduateSchool: '',
				major: '',
				teachingYears: '',
				idCardFront: '',
				idCardBack: '',
				diplomaImg: '',
				teacherCertImg: '',
				introduction: '',
				teachingYearsText: ''
			},
			educationLevels: ['高中', '大专', '本科', '硕士', '博士'],
			educationIndex: -1,
			teachingYearsOptions: ['1年', '2年', '3年', '4年', '5年', '6-10年', '10年以上'],
			teachingYearsIndex: -1,
			isAgreed: false,
			isSubmitting: false,
			errors: {},
			// 实名认证相关状态
			realNameAuthStatus: 'none', // none: 未认证, processing: 认证中, success: 已认证, failed: 认证失败
			realNameAuthMessage: ''

		};
	},
	onLoad(options) {
		// 从上一个页面获取科目和年级信息
		console.log('认证页面接收到的参数:', options);

		try {
			// 获取用户基本信息
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.formData.phone = userInfo.phone || '';
				// 可以添加更多默认信息
			}

			// 每次进入页面都重置为未认证状态
			this.realNameAuthStatus = 'none';
			this.realNameAuthMessage = '';
		} catch (error) {
			console.error('解析数据失败:', error);
		}
	},
	methods: {
		// 处理实名认证
		async handleRealNameAuth() {
			if (!this.canStartRealNameAuth()) {
				uni.showToast({
					title: '请先填写真实姓名和身份证号',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			// 验证身份证号格式
			if (!/^\d{17}[\dX]$/.test(this.formData.idNumber)) {
				uni.showToast({
					title: '身份证号格式不正确',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			this.realNameAuthStatus = 'processing';

			// 显示加载提示
			uni.showLoading({
				title: '正在进行实名认证...',
				mask: true
			});

			try {
				// 模拟实名认证过程（延迟2秒）
				await new Promise(resolve => setTimeout(resolve, 2000));

				// 简单的身份证号验证逻辑
				const isValid = this.validateIdNumber(this.formData.idNumber);

				if (isValid) {
					this.realNameAuthStatus = 'success';
					this.realNameAuthMessage = '实名认证成功';

					uni.hideLoading();
					uni.showToast({
						title: '实名认证成功',
						icon: 'success',
						duration: 2000
					});
				} else {
					throw new Error('身份证信息验证失败');
				}
			} catch (error) {
				console.error('实名认证失败:', error);
				this.realNameAuthStatus = 'failed';
				this.realNameAuthMessage = error.message || '实名认证失败，请重试';

				uni.hideLoading();
				uni.showToast({
					title: this.realNameAuthMessage,
					icon: 'none',
					duration: 2000
				});
			}
		},

		// 简单的身份证号验证
		validateIdNumber(idNumber) {
			// 基本格式验证
			if (!/^\d{17}[\dX]$/.test(idNumber)) {
				return false;
			}

			// 这里可以添加更复杂的身份证验证逻辑
			// 比如校验码验证、出生日期验证等
			// 目前简化处理，只要格式正确就通过
			return true;
		},

		// 检查是否可以开始实名认证
		canStartRealNameAuth() {
			return this.formData.realName && this.formData.idNumber && this.realNameAuthStatus !== 'success';
		},

		// 检查是否可以提交认证
		canSubmitCertification() {
			return this.realNameAuthStatus === 'success';
		},

		// 获取实名认证按钮样式类
		getRealNameAuthBtnClass() {
			switch (this.realNameAuthStatus) {
				case 'success':
					return 'success';
				case 'failed':
					return 'failed';
				case 'processing':
					return 'processing';
				default:
					return '';
			}
		},

		// 获取实名认证按钮文本
		getRealNameAuthBtnText() {
			switch (this.realNameAuthStatus) {
				case 'success':
					return '已认证';
				case 'failed':
					return '重新认证';
				case 'processing':
					return '认证中...';
				default:
					return '开始实名认证';
			}
		},

		// 获取实名认证状态样式类
		getRealNameAuthStatusClass() {
			switch (this.realNameAuthStatus) {
				case 'success':
					return 'status-success';
				case 'failed':
					return 'status-failed';
				case 'processing':
					return 'status-processing';
				default:
					return 'status-none';
			}
		},

		// 获取实名认证状态文本
		getRealNameAuthStatusText() {
			switch (this.realNameAuthStatus) {
				case 'success':
					return '✓ 实名认证已通过';
				case 'failed':
					return '✗ ' + (this.realNameAuthMessage || '实名认证失败');
				case 'processing':
					return '⏳ 正在进行实名认证...';
				default:
					return '* 需要完成实名认证才能提交';
			}
		},

		handleEducationChange(e) {
			this.educationIndex = e.detail.value;
			this.formData.education = this.educationLevels[this.educationIndex];
		},
		handleTeachingYearsChange(e) {
			this.teachingYearsIndex = e.detail.value;
			const selectedOption = this.teachingYearsOptions[this.teachingYearsIndex];
			
			// 显示用的文本保持原样
			this.formData.teachingYearsText = selectedOption;
			
			// 存储用的数值进行转换
			let years = selectedOption;
			// 将"x年"格式转换为数字
			years = years.replace(/年.*$/, '');
			if (years.includes('-')) {
				// 对于"6-10年"这样的范围，取平均值
				const range = years.split('-');
				this.formData.teachingYears = Math.round((parseInt(range[0]) + parseInt(range[1])) / 2);
			} else if (years.includes('以上')) {
				// 对于"10年以上"，取固定值15
				this.formData.teachingYears = 15;
			} else {
				this.formData.teachingYears = parseInt(years);
			}
		},
		handleAgreementChange(e) {
			this.isAgreed = e.detail.value.length > 0;
			console.log('协议勾选状态改变:', this.isAgreed);
		},
		toggleAgreement() {
			this.isAgreed = !this.isAgreed;
			console.log('手动切换协议勾选状态:', this.isAgreed);
		},
		chooseImage(field) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					// 获取图片本地路径
					const tempFilePath = res.tempFilePaths[0];
					console.log('选择的图片路径:', tempFilePath);
					
					// 显示加载中状态
					uni.showLoading({
						title: '上传中...',
						mask: true
					});
					
					// 获取BASE_URL
					const BASE_URL = 'http://localhost:10001';
					
					// 上传图片到服务器
					uni.uploadFile({
						url: `${BASE_URL}/user/teacher/upload-certificate`, // 使用实际的上传接口
						filePath: tempFilePath,
						name: 'file',
						formData: {
							'type': field
						},
						success: (uploadRes) => {
							console.log('上传成功，服务器响应:', uploadRes);
							
							try {
								// 尝试解析响应数据
								const data = JSON.parse(uploadRes.data);
								console.log("图片路径："+JSON.stringify(data))
								if (data.code === 200 ) {
									// 更新图片URL
									this.formData[field] = data.data;
									console.log("图片上传成功")
									uni.showToast({
										title: '上传成功',
										icon: 'success'
									});
								} else {
									throw new Error(data.msg || '上传失败');
								}
							} catch (e) {
								console.error('解析响应失败:', e, uploadRes);
								
								// 服务端返回错误或解析失败，仍使用本地图片路径（作为临时解决方案）
								this.formData[field] = tempFilePath;
								
								uni.showToast({
									title: '已使用本地图片',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.error('上传失败:', err);
							
							// 上传失败，使用本地图片路径
							this.formData[field] = tempFilePath;
							
							uni.showToast({
								title: '上传服务暂不可用，已使用本地图片',
								icon: 'none'
							});
						},
						complete: () => {
							uni.hideLoading();
						}
					});
				},
				fail: (err) => {
					console.error('选择图片失败:', err);
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					});
				}
			});
		},
		async submitCertification() {
			// 输出当前勾选状态
			console.log('提交时的协议勾选状态:', this.isAgreed);

			// 首先检查实名认证状态
			if (this.realNameAuthStatus !== 'success') {
				uni.showToast({
					title: '请先完成实名认证',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			// 手动检查表单是否填写完整
			let canSubmit = true;
			const errors = [];

			if (!this.formData.realName) {
				errors.push('请输入真实姓名');
				canSubmit = false;
			}

			if (!this.formData.idNumber) {
				errors.push('请输入身份证号码');
				canSubmit = false;
			} else if (!/^\d{17}[\dX]$/.test(this.formData.idNumber)) {
				errors.push('身份证号码格式不正确');
				canSubmit = false;
			}
			
			if (!this.formData.phone) {
				errors.push('请输入手机号码');
				canSubmit = false;
			} else if (!/^1\d{10}$/.test(this.formData.phone)) {
				errors.push('手机号码格式不正确');
				canSubmit = false;
			}
			
			if (this.formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData.email)) {
				errors.push('邮箱格式不正确');
				canSubmit = false;
			}
			
			// 这些验证可以根据实际需要放开
			/*
			if (!this.formData.education) {
				errors.push('请选择最高学历');
				canSubmit = false;
			}
			
			if (!this.formData.graduateSchool) {
				errors.push('请输入毕业院校');
				canSubmit = false;
			}
			
			if (!this.formData.major) {
				errors.push('请输入专业名称');
				canSubmit = false;
			}
			
			if (!this.formData.teachingYears) {
				errors.push('请选择教龄');
				canSubmit = false;
			}
			*/
			
			if (!this.formData.idCardFront) {
				errors.push('请上传身份证正面照片');
				canSubmit = false;
			}
			
			if (!this.formData.idCardBack) {
				errors.push('请上传身份证背面照片');
				canSubmit = false;
			}
			
			if (!this.formData.diplomaImg) {
				errors.push('请上传学历证书照片');
				canSubmit = false;
			}
			
			if (!this.formData.introduction) {
				errors.push('请输入教学简介');
				canSubmit = false;
			} else if (this.formData.introduction.length < 5) {
				errors.push('请至少输入5字的教学简介');
				canSubmit = false;
			}
			
			// 检查是否勾选协议
			console.log('提交前再次检查协议勾选状态:', this.isAgreed);
			if (!this.isAgreed) {
				errors.push('请阅读并同意协议');
				canSubmit = false;
				
				// 显示特定提示，强调需要勾选协议
				uni.showToast({
					title: '请先勾选同意协议',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			
			if (!canSubmit) {
				uni.showToast({
					title: errors[0] || '请完善所有必填信息',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			
			// 防止重复提交
			if (this.isSubmitting) {
				return;
			}
			
			this.isSubmitting = true;
			
			// 显示加载提示
			uni.showLoading({
				title: '保存认证信息...',
				mask: true
			});
			
			try {
				// 获取当前用户ID
				const userInfo = uni.getStorageSync('userInfo');
				
				// 构建认证数据
				const certificationData = {
					...this.formData,
					userId: 1, // 使用ID为1的测试用户
					timestamp: new Date().getTime(),
					isSubmitted: true, // 标记为已提交状态
					status: 'pending' // 默认状态为待审核
				};
				
				// 输出认证数据用于调试
				console.log('认证数据:', JSON.stringify(certificationData));
				
				// 保存认证数据到本地存储!!!!!
				try {
					// 保存认证数据
					uni.setStorageSync('teacherCertificationData', JSON.stringify(certificationData));
					// 设置认证状态为"已填写待注册"
					uni.setStorageSync('certificationStatus', 'pending_registration');
					console.log('认证数据已保存到本地');
					
					// 隐藏加载提示
					uni.hideLoading();
					
					uni.showToast({
						title: '认证信息已保存',
						icon: 'success',
						duration: 1500
					});
					
					// 记录认证历史
					this.saveCertificationHistory(certificationData);
					
					// 延迟后跳转到教师注册页面
					setTimeout(() => {
						// 跳转到教师注册页面
						uni.navigateTo({
							url: `/pages/signup/signup?role=teacher&fromCertification=true`
						});
					}, 1500);
				} catch (e) {
					throw new Error('保存认证数据失败: ' + e.message);
				}
			} catch (error) {
				console.error('认证保存失败:', error);
				// 隐藏加载提示
				uni.hideLoading();
				
				uni.showToast({
					title: error.message || '保存失败，请重试',
					icon: 'none',
					duration: 3000
				});
			} finally {
				this.isSubmitting = false;
			}
		},
		// 保存认证历史记录
		saveCertificationHistory(certificationData) {
			try {
				// 获取现有历史记录
				let certHistory = [];
				const existingHistory = uni.getStorageSync('certificationHistory');
				if (existingHistory) {
					certHistory = JSON.parse(existingHistory);
				}
				
				// 添加新的认证记录
				certHistory.push({
					id: certificationData.timestamp,
					userId: certificationData.userId,
					realName: certificationData.realName,
					submitTime: new Date().toISOString(),
					status: certificationData.status
				});
				
				// 保存更新后的历史记录
				uni.setStorageSync('certificationHistory', JSON.stringify(certHistory));
				console.log('认证历史记录已更新');
			} catch (e) {
				console.error('保存认证历史记录失败:', e);
			}
		}
	}
};
</script>

<style>
.certification-container {
	padding: 30rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
	color: #333;
}

.section {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-left: 20rpx;
	border-left: 6rpx solid #ff6b6b;
}

.form-item {
	margin-bottom: 30rpx;
}

.label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
	display: block;
}

.input {
	width: 100%;
	height: 80rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333;
	border: 1px solid #e0e0e0;
}

.picker-item {
	width: 100%;
	height: 80rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333;
	border: 1px solid #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.arrow {
	color: #999;
	font-size: 24rpx;
}

.upload-item {
	margin-bottom: 30rpx;
}

.upload-label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
	display: block;
}

.upload-container {
	width: 100%;
	height: 320rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	border: 1px dashed #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.upload-icon {
	font-size: 60rpx;
	color: #ccc;
	margin-bottom: 10rpx;
}

.upload-text {
	font-size: 26rpx;
	color: #999;
}

.preview-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.intro-textarea {
	width: 100%;
	height: 200rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: #333;
	border: 1px solid #e0e0e0;
}

.agreement-section {
	margin: 30rpx 0;
	padding: 20rpx;
	background-color: #f9f9f9;
	border-radius: 12rpx;
}

.agreement-item {
	display: flex;
	align-items: center;
	padding: 15rpx;
	border-radius: 8rpx;
	background-color: #fff;
	box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
}

.agreement-item:active {
	background-color: #f0f0f0;
}

.agreement-text {
	font-size: 26rpx;
	color: #666;
	margin-left: 10rpx;
}

.validation-status {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.validation-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-left: 20rpx;
	border-left: 6rpx solid #ff6b6b;
}

.validation-item {
	display: flex;
	align-items: center;
	padding: 10rpx 0;
	border-bottom: 1px solid #f0f0f0;
}

.validation-item.valid {
	color: #52c41a;
}

.status-icon {
	margin-right: 20rpx;
	font-weight: bold;
}

.validation-item:not(.valid) .status-icon {
	color: #ff4d4f;
}

.submit-btn {
	width: 100%;
	height: 90rpx;
	background-color: #ff6b6b;
	color: #fff;
	border-radius: 45rpx;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 50rpx;
}

.submit-btn:disabled {
	background-color: #cccccc;
}

.tip-valid {
	color: #52c41a;
	font-size: 24rpx;
	margin-top: 10rpx;
	display: block;
}

.tip-invalid {
	color: #ff4d4f;
	font-size: 24rpx;
	margin-top: 10rpx;
	display: block;
}

.tip-optional {
	color: #999;
	font-size: 24rpx;
	margin-top: 10rpx;
	display: block;
}

.validation-tips {
	display: flex;
	flex-direction: column;
	margin-top: 10rpx;
}

.character-count {
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
	font-size: 24rpx;
	color: #999;
}

.required-hint {
	color: #ff4d4f;
	font-size: 24rpx;
	margin-top: 10rpx;
	display: block;
}

.text-count {
	display: flex;
	justify-content: flex-end;
	margin-top: 10rpx;
	font-size: 24rpx;
	color: #999;
}

/* 实名认证相关样式 */
.realname-auth-container {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.realname-auth-btn {
	width: 200rpx;
	height: 60rpx;
	background-color: #ff6b6b;
	color: #fff;
	border-radius: 30rpx;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	outline: none;
}

.realname-auth-btn:disabled {
	background-color: #cccccc;
	color: #999;
}

.realname-auth-btn.success {
	background-color: #52c41a;
}

.realname-auth-btn.failed {
	background-color: #ff4d4f;
}

.realname-auth-btn.processing {
	background-color: #1890ff;
}

.realname-auth-status {
	font-size: 24rpx;
	margin-top: 5rpx;
}

.status-success {
	color: #52c41a;
}

.status-failed {
	color: #ff4d4f;
}

.status-processing {
	color: #1890ff;
}

.status-none {
	color: #ff4d4f;
}
</style> 
